<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=QIw7CEn9awTfvoOMeBoRfA5X4gHVYIB3"></script>
<style type="text/css">
    .pclass p {
        font-size: 10px;
    }
</style>
<div class="layui-fluid">
    <div class="layui-row" style="margin-top: 10px">
        <div class="layui-col-md8">
            <div id="allmap" style="height: 400px;width: 400px"></div>
        </div>
        <div class="layui-col-md4">
            <input type="text" name="cityName" id="cityName-new" required lay-verify="required" placeholder="请输入区域" style="width: 120px;display: inline-block;vertical-align: top;" autocomplete="off" class="layui-input">
            <button class="layui-btn" onclick="theLocation()">查询</button>
            <div>
                <span>坐标:<p id="coordinate-map"></p></span>
                <span class="pclass">详细地址:<p id="site-map"></p></span>
            </div>
            <br/><br/><br/><br/><br/>
            <button class="layui-btn layui-btn-danger" onclick="addcoordinate()">确&nbsp;&nbsp;&nbsp;&nbsp;定</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    function addcoordinate() {
        var address = $("#site-map").html();
        var coordinate = $("#coordinate-map").html();
        if (address != '' && address != undefined) {
            $("#cityName-coordinate").val(coordinate);
            $("#cityName-address").val(address);
            layer.closeAll();
        } else {
            layer.msg("请在地图选择地址", {icon: 5});
        }

    }


    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(106.558437, 29.568996);
    map.centerAndZoom(point, 13);
    var geoc = new BMap.Geocoder();
    map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom();    //启用地图惯性拖拽，默认禁用
    //单击获取点击的经纬度
    map.addEventListener("click", function (e) {
        $("#coordinate-map").html(e.point.lng + "," + e.point.lat);
        var pt = e.point;
        geoc.getLocation(pt, function (rs) {
            var address = rs.address;
            $("#site-map").html(address);
        });
    });

    function theLocation() {
        var city = document.getElementById("cityName-new").value;
        if (city != "") {
            map.centerAndZoom("重庆市" + city, 16);      // 用城市名设置地图中心点
        }
    }

</script>